<template>
 <div>

    <myheader></myheader>

    <table>

      <tr>

        <td>商品名称:</td>

        <td>
          <input type="text" v-model="name" />
        </td>
      </tr>

      <tr>

        <td>商品简介:</td>

        <td>
          <input type="text" v-model="desc">
        </td>

      </tr>

      <tr>

        <!-- <td>商品图:</td>

        <td>
          <input type="file" id="img" />
        </td>

      </tr>

      <tr>

        <td>演示视频:</td>

        <td>
          <input type="file" id="image" />
        </td>

      </tr> -->

      <tr>

        <td>商品价格:</td>

        <td>
          <input type="text" v-model="price" />
        </td>

      </tr>



      <tr>

        <td>
            颜色:{{color}}
          <Select v-model="color" :datas="colors" placeholder="请选择"></Select>

        </td>


      </tr>
      <tr>
        <td>
            尺寸:{{size}}
          <Select v-model="size" :datas="sizes" placeholder="请选择"></Select>

        </td>

      </tr>


    </table>
    <br>

    <Button @click="insertgoods">添加商品</Button>

    <mybody></mybody>



 </div>
</template>

<script>


//导包
import myheader from './myheader.vue';
import mybody from "./mybody";

export default {
  data: function() {
    return {
      name: "",
      desc: "",
      price: "",
      cate_id: "",
      color: "请选择",
      size: "请选择",

      //商品规格
      colors:[
          {title:'红色',key:'红色'},
          {title:'黄色',key:'黄色'},
          {title:'蓝色',key:'蓝色'},
      ],
      sizes:[
          {title:'xl',key:'xl'},
          {title:'xxl',key:'xxl'},
          {title:'xxxl',key:'xxxl'},
      ]

    };
  },

  components: {
    'myheader': myheader,
    'mybody':mybody,
  },

  methods: {
    // 添加商品
    insertgoods(){

      this.axios.get("http://127.0.0.1:8000/insertgoods/", {
          params: {
            name: this.name,
            desc: this.desc,
            price: this.price,
            cate_id: localStorage.getItem('uid'),
            parms: {
              color: this.color,
              size: this.size,
            }
          }
        }).then(res => {
          console.log(res.data);
          alert('添加成功')
        });
    }
  }


}
</script>
